<template>
  <div class="PicShow">
    <van-pull-refresh v-model="isRefresh" @refresh="refresh"
                      success-text="加载完成" success-duration="500">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getImg">
        <div @click="goDetail('/home/photoinfo',item.id)" class="imagesItem"
             v-for="item in imgList" :key="item.id">
          <img alt="" :title="item.title"
               v-lazy="item.img_url">
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'PicShow',
  props: {
    classId: {
      type: Number
    }
  },
  data: () => ({
    imgList: [],
    loading: false,
    finished: false,
    isRefresh: false
  }),
  methods: {
    async getImg () { // 获取图片列表
      const { message } = await this.$http.getImg(this.classId)
      this.imgList = message
      this.loading = false
      this.finished = true
    },
    async refresh () {
      // 初始化参数
      this.finished = false
      this.loading = true
      await this.getImg()
      this.isRefresh = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .PicShow {
    .van-list {
      padding: 20px;

      .imagesItem {
        padding-bottom: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
